<jsp:include page="includes/header.jsp" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="webContext" value="${pageContext.request.contextPath}" />

<!--Slider-->
<section id="slide-show">
	<div id="slider" class="sl-slider-wrapper">

		<!--Slider Items-->
		<div class="sl-slider">
			<!--Slider Item1-->
			<div class="sl-slide item1" data-orientation="horizontal"
				data-slice1-rotation="-25" data-slice2-rotation="-25"
				data-slice1-scale="2" data-slice2-scale="2">
				<div class="sl-slide-inner">
					<div class="container">
						<img class="pull-right"
							src="${webContext}/resources/images/sample/slider/img1.png"
							alt="" />
						<h2>
							<spring:message code="slider.image1.mainText" />
						</h2>
						<h3 class="gap">Cursos online</h3>
						<a class="btn btn-large btn-transparent" href="#">Ver mas</a>
					</div>
				</div>
			</div>
			<!--/Slider Item1-->

			<!--Slider Item2-->
			<div class="sl-slide item2" data-orientation="vertical"
				data-slice1-rotation="10" data-slice2-rotation="-15"
				data-slice1-scale="1.5" data-slice2-scale="1.5">
				<div class="sl-slide-inner">
					<div class="container">
						<img class="pull-right"
							src="${webContext}/resources/images/sample/slider/img2.png"
							alt="" />
						<h2>Una comunidad de aprendizaje</h2>
						<h3 class="gap">Miles de personas que comparten conocimiento</h3>
						<a class="btn btn-large btn-transparent" href="#">Ver mas</a>
					</div>
				</div>
			</div>
			<!--Slider Item2-->

			<!--Slider Item3-->
			<div class="sl-slide item3" data-orientation="horizontal"
				data-slice1-rotation="3" data-slice2-rotation="3"
				data-slice1-scale="2" data-slice2-scale="1">
				<div class="sl-slide-inner">
					<div class="container">
						<img class="pull-right"
							src="${webContext}/resources/images/sample/slider/img3.png"
							alt="" />
						<h2>Aprende desarrollo de apps para m&oacute;viles</h2>
						<h3 class="gap">Aprende Android, Objective-C, Swift y mas</h3>
						<a class="btn btn-large btn-transparent" href="#">Ver mas</a>
					</div>
				</div>
			</div>
			<!--Slider Item3-->

		</div>
		<!--/Slider Items-->

		<!--Slider Next Prev button-->
		<nav id="nav-arrows" class="nav-arrows">
			<span class="nav-arrow-prev"><i class="icon-angle-left"></i></span> <span
				class="nav-arrow-next"><i class="icon-angle-right"></i></span>
		</nav>
		<!--/Slider Next Prev button-->

	</div>
	<!-- /slider-wrapper -->
</section>
<!--/Slider-->

<section class="main-info">
	<div class="container">
		<div class="row-fluid">
			<div class="span9">
				<h4>Reg&iacute;strate ahora para comenzar a beneficiarte de los
					cursos que tenemos para ti</h4>
				<p class="no-margin">Al registrarte tendr&aacute;s acceso
					completo a los todos los cursos disponibles y clases online</p>
			</div>
			<div class="span3">
				<a class="btn btn-success btn-large pull-right"
					href="${webContext}/registro">Registrate Ya!!!</a>
			</div>
		</div>
	</div>
</section>

<!--Services-->
<section id="services">
	<div class="container">
		<div class="center gap">
			<h3>Que te ofrecemos</h3>
			<p class="lead">Mira algunos de los servicios que ponemos a tu
				disposici&oacute;n</p>
		</div>

		<div class="row-fluid">
			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-globe icon-medium"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Cursos de programaci&oacute;n</h4>
						<p>Disponemos de una variada colecci&oacute;n de cursos que te
							ayudaran a aprender los diferentes aspectos de los lenguajes de
							programaci&oacute;n m&aacute;s importantes de la actualidad.
							Estos est&aacute;n compuestos por nivel que van desde el
							B&aacute;sico, pasando por intermedio para finalmente llegar al
							nivel avanzado.</p>
					</div>
				</div>
			</div>

			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-thumbs-up-alt icon-medium"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Material multimedia</h4>
						<p>Cada curso estar&aacute; apoyado por material multimedia
							como videos, presentaciones, audios, etc, que te ayudaran a
							avanzar por los diferentes temas de cada curso. Adicional se
							contaran con presentaciones interactivas sobre cada tema.</p>
					</div>
				</div>
			</div>

			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-leaf icon-medium icon-rounded"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Clases en l&iacute;nea</h4>
						<p>Los cursos tendr&aacute;n la capacidad de disponer d una
							clase en l&iacute;nea impartida por uno de los instructores de
							nuestra academia. Esto permitir&aacute; una interacci&oacute;n
							m&aacute;s cercana con los temas del curso y el instructor que
							har&aacute;n que aprendas mucho m&aacute;s r&aacute;pido.</p>
					</div>
				</div>
			</div>
		</div>

		<div class="gap"></div>

		<div class="row-fluid">
			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-shopping-cart icon-medium"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Chat</h4>
						<p>Dentro de las clases en l&iacute;nea podr&aacute;s tener la
							oportunidad de acceder a un chat donde interactuaras con otros
							miembros de la comunidad para solucionar tus dudad e inquietudes
							o puedas brindar tus propios aportes sobre las tem&aacute;ticas
							de los cursos.</p>
					</div>
				</div>
			</div>

			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-globe icon-medium"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Foros</h4>
						<p>Para que puedas tener la oportunidad de discutir tus temas
							favoritos contaras con un foro donde plasmaras todas tus ideas,
							comentarios y aportes para la comunidad. Tambi&eacute;n
							ser&aacute; un medio m&aacute;s de aprendizaje donde
							recibir&aacute;s mucho conocimiento de otros usuario y los
							instructores.</p>
					</div>
				</div>
			</div>

			<div class="span4">
				<div class="media">
					<div class="pull-left">
						<i class="icon-globe icon-medium"></i>
					</div>
					<div class="media-body">
						<h4 class="media-heading">Inmersi&oacute;n 3D</h4>
						<p>Como una novedad podr&aacute;s ingresar a un mundo virtual
							3D para unirte a la comunidad de usuarios adeptos a aprender
							cosas nuevas. All&iacute; podr&aacute;s asistir a conferencias
							virtuales, compartir con otros usuarios y pasar un rato agradable
							jugando en este mundo 3D diseñado especialmente para ti!!</p>
					</div>
				</div>
			</div>
		</div>

	</div>
</section>
<!--/Services-->

<section id="recent-works">
	<div class="container">
		<div class="center">
			<h3>Nuestros cursos m&aacute;s recientes...</h3>
			<p class="lead">&Eacute;chale un vistazo a estos nuevos cursos
				que ya est&aacute;n disponibles.</p>
		</div>
		<div class="gap"></div>
		<ul class="gallery col-4">
			<!--Item 1-->
			<li>
				<div class="preview">
					<img alt=" "
						src="${webContext}/resources/images/portfolio/thumb/item1.jpg">
					<div class="overlay"></div>
					<div class="links">
						<a data-toggle="modal" href="#modal-1"><i
							class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
					</div>
				</div>
				<div class="desc">
					<h5>Lorem ipsum dolor sit amet</h5>
				</div>
				<div id="modal-1" class="modal hide fade">
					<a class="close-modal" href="javascript:;" data-dismiss="modal"
						aria-hidden="true"><i class="icon-remove"></i></a>
					<div class="modal-body">
						<img src="${webContext}/resources/images/portfolio/full/item1.jpg"
							alt=" " width="100%" style="max-height: 400px">
					</div>
				</div>
			</li>
			<!--/Item 1-->

			<!--Item 2-->
			<li>
				<div class="preview">
					<img alt=" "
						src="${webContext}/resources/images/portfolio/thumb/item2.jpg">
					<div class="overlay"></div>
					<div class="links">
						<a data-toggle="modal" href="#modal-1"><i
							class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
					</div>
				</div>
				<div class="desc">
					<h5>Lorem ipsum dolor sit amet</h5>
				</div>
				<div id="modal-1" class="modal hide fade">
					<a class="close-modal" href="javascript:;" data-dismiss="modal"
						aria-hidden="true"><i class="icon-remove"></i></a>
					<div class="modal-body">
						<img src="${webContext}/resources/images/portfolio/full/item2.jpg"
							alt=" " width="100%" style="max-height: 400px">
					</div>
				</div>
			</li>
			<!--/Item 2-->

			<!--Item 3-->
			<li>
				<div class="preview">
					<img alt=" "
						src="${webContext}/resources/images/portfolio/thumb/item3.jpg">
					<div class="overlay"></div>
					<div class="links">
						<a data-toggle="modal" href="#modal-3"><i
							class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
					</div>
				</div>
				<div class="desc">
					<h5>Lorem ipsum dolor sit amet</h5>
				</div>
				<div id="modal-3" class="modal hide fade">
					<a class="close-modal" href="javascript:;" data-dismiss="modal"
						aria-hidden="true"><i class="icon-remove"></i></a>
					<div class="modal-body">
						<img src="${webContext}/resources/images/portfolio/full/item3.jpg"
							alt=" " width="100%" style="max-height: 400px">
					</div>
				</div>
			</li>
			<!--/Item 3-->

			<!--Item 4-->
			<li>
				<div class="preview">
					<img alt=" "
						src="${webContext}/resources/images/portfolio/thumb/item4.jpg">
					<div class="overlay"></div>
					<div class="links">
						<a data-toggle="modal" href="#modal-4"><i
							class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>
					</div>
				</div>
				<div class="desc">
					<h5>Lorem ipsum dolor sit amet</h5>
				</div>
				<div id="modal-4" class="modal hide fade">
					<a class="close-modal" href="javascript:;" data-dismiss="modal"
						aria-hidden="true"><i class="icon-remove"></i></a>
					<div class="modal-body">
						<img src="${webContext}/resources/images/portfolio/full/item4.jpg"
							alt=" " width="100%" style="max-height: 400px">
					</div>
				</div>
			</li>
			<!--/Item 4-->

		</ul>
	</div>

</section>

<section id="clients" class="main">
	<div class="container">
		<div class="row-fluid">
			<div class="span2">
				<div class="clearfix">
					<h4 class="pull-left">Nuestros aliados</h4>
					<div class="pull-right">
						<a class="prev" href="#myCarousel" data-slide="prev"><i
							class="icon-angle-left icon-large"></i></a> <a class="next"
							href="#myCarousel" data-slide="next"><i
							class="icon-angle-right icon-large"></i></a>
					</div>
				</div>
				<p>Junto con ellos trabajamos para ofrecerte el mejor
					conocimiento posible</p>
			</div>
			<div class="span10">
				<div id="myCarousel" class="carousel slide clients">
					<!-- Carousel items -->
					<div class="carousel-inner">
						<div class="active item">
							<div class="row-fluid">
								<ul class="thumbnails">
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client1.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client2.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client3.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client4.png"></a></li>
								</ul>
							</div>
						</div>

						<div class="item">
							<div class="row-fluid">
								<ul class="thumbnails">
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client4.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client3.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client2.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client1.png"></a></li>
								</ul>
							</div>
						</div>

						<div class="item">
							<div class="row-fluid">
								<ul class="thumbnails">
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client1.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client2.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client3.png"></a></li>
									<li class="span3"><a href="#"><img
											src="${webContext}/resources/images/sample/clients/client4.png"></a></li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /Carousel items -->

				</div>
			</div>
		</div>
	</div>
</section>


<jsp:include page="includes/footer.jsp" />